<%--
  Created by IntelliJ IDEA.
  User: Mankind
  Date: 2017/7/14
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String userName = request.getParameter("userName"); %>
<%@ tagliburi="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html>
<html>
<head>
    <title>SSM练手项目</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${path}/css/main.css">
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${path}/css/simple-line-icons.css" rel="stylesheet">
    <link rel="${path}/stylesheet" href="css/login.css">
    <link rel="stylesheet" href="${path}/css/manager.css">
    <link rel="stylesheet" href="${path}/css/personal-message.css">
    <link href="${path}/css/multiple-select.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${path}/css/fileinput.min.css">
    <link rel="stylesheet" href="${path}/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/xcConfirm.css"/>
    <link rel="stylesheet" href="${path}/css/bootstrapValidator.min.css">
</head>
<body id="body">
<header class="app-header navbar" id="header">
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav hidden-md-down">
        <shiro:hasRole  name="超级管理员">
            <li class="nav-item px-1">
                <a type="button" class="nav-link" href="#">超级管理员通道</a>
            </li>
        </shiro:hasRole>
        <shiro:hasRole  name="管理员">
            <li class="nav-item px-1">
                <a class="nav-link" href="#">管理员通道</a>
            </li>
        </shiro:hasRole>
        <shiro:hasRole  name="教师">
            <li class="nav-item px-1">
                <a class="nav-link" href="#">教师通道</a>
            </li>
        </shiro:hasRole>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link navbar-toggler aside-menu-toggler" href="/logout.action">退出系统</a>
            <!-- <button id="reset" type="button" class="btn btn-primary btn-default">退出系统</button> -->
        </li>
    </ul>
</header>
<div class="container" id="content-wrap">
    <div class="row clearfix" id="content">
        <div class="col-md-2 column "  id="content-left">
            <div class="panel-group" id="panel-800988">
                <shiro:hasAnyRoles name='超级管理员,管理员,教师'>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-1">用户管理</a>
                    </div>
                    <div id="panel-element-1" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="message">用户信息</a>
                                </li>
                                <li>
                                    <a href="#" class="2" name="role">分配角色</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasAnyRoles>
                <shiro:hasAnyRoles name='超级管理员'>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-2">角色管理</a>
                    </div>
                    <div id="panel-element-2" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="message">角色信息</a>
                                </li>
                                <li>
                                    <a href="#" class="2" name="role">分配权利</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasAnyRoles>
                <shiro:hasRole name="超级管理员">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-3">权限管理</a>
                    </div>
                    <div id="panel-element-3" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="permission-message">权限信息</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </shiro:hasRole>
            </div>
        </div>
        <div class="col-md-10 column " id="content-right">
            <div class="tabbable" id="tabs-948784">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-1" data-toggle="tab"  name="permission-message">权限信息</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-1">
                        <div class="right-body">
                            <div class="row">
                                <div class="col-md-4  column search-bar" >
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" id="create-permission-btn">添加权限</button>
                                </div>
                                <div class="col-md-8 col-md-push-3 column search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="text" id="text-1" >
                                        </div>
                                        <button name="search-1" type="button" class="btn btn-primary btn-sm search">开始查找</button>
                                        <button name="reset-1" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="first-table" class="table table-striped " style="table-layout:fixed">
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="first-paginator"></ul>
                        </div>
                    </div>
                    <!-- <div class="tab-pane" id="panel-2">
                        <div class="right-body">
                            <div class="row clearfix">
                                <div class="col-md-4  column search-bar" >
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">添加权限</button>
                                </div>
                                <div class="col-md-8 col-md-push-3 column search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="text" id="text-2" >
                                        </div>
                                        <button name="search-2" type="button" class="btn btn-primary btn-sm search">开始查找</button>
                                        <button name="reset-2" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="second-table" class="table table-striped " style="table-layout:fixed">
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="second-paginator"></ul>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--新建用户模态框-->
<div name="create-permission" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加权限</h4>
            </div>
            <div class="modal-body">
                <form id="create-form">
                      <div class="form-group">
                        <label for="recipient-name" class="control-label">权限名称:</label>
                        <input type="text" class="form-control" name="resourceName" id="name" placeholder="请输入权限名称"/>
                      </div>
                      <div class="form-group">
                        <label for="recipient-name" class="control-label">权限URL地址:</label>
                        <input type="text" class="form-control" id="url" name="resourceUrl"  placeholder="请输入权限URL地址">
                      </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="create-btn" >添加权限</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--编辑用户模态框-->
<div name="update-modal" class="modal fade" id="update-modal-" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel3">编辑用户</h4>
            </div>
            <div class="modal-body">
                <form id="update-form">
                      <div class="form-group">
                        <label for="recipient-name" class="control-label">权限名称:</label>
                        <input type="text" class="form-control" name="resourceName" id="name" placeholder="请输入权限名称"/>
                      </div>
                      <div class="form-group">
                        <label for="recipient-name" class="control-label">权限URL地址:</label>
                        <input type="text" class="form-control" id="url" name="resourceUrl"  placeholder="请输入权限URL地址">
                      </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="update-submit" data-dismiss="modal" >提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--修改成功提示-->
<div  class="modal fade" id="update-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel4">操作成功</h4>
            </div>
            <div class="modal-body text-center">
                <span>您已经成功修改该权限！</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="update-success-btn">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--添加成功提示-->
<div  class="modal fade" id="create-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel5">操作成功</h4>
            </div>
            <div class="modal-body text-center">
                <span>您已经成功添加权限!</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="create-success-btn">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--删除成功提示-->
<div  class="modal fade" id="delete-success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel7" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel7">操作成功</h4>
            </div>
            <div class="modal-body text-center">
                <span>您已经成功删除权限!</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="delete-success-btn">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--删除提示-->
<div name="delete-modal" class="modal fade" id="delete-modal-" tabindex="-1" role="dialog" aria-labelledby="myModalLabel6" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel6">警告！</h4>
            </div>
            <div class="modal-body text-center">
                <span>删除权限会导致拥有该权限的角色丢失此权限,是否确认删除该权限？</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="delete-confirm-btn" data-dismiss="modal">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>

</script>
<script src="${path}/js/jquery-3.0.0.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="${path}/js/fileinput.min.js"></script>
<script src="${path}/js/multiple-select.js"></script>
<script type="text/javascript" src="${path}/js/fileinput_locale_zh.js"></script>
<script src="${path}/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${path}/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="${path}/js/distpicker.data.min.js"></script>
<script src="${path}/js/distpicker.min.js"></script>
<script src="${path}/js/back.js"></script>
<script src="${path}/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/js/bootstrapValidator.min.js"></script>
<script src="${path}/js/language/zh_CN.js"></script>
<script type='text/javascript'>
    $("#create-permission-btn").click(function(){
        $("div[name='create-permission']").find("input").val("");
    })
    //添加权限验证
    $('#create-form').bootstrapValidator({
        message: 'This value is not valid',
        fields:{
            userAccount:{
                validators:{
                    notEmpty:{
                        message: '账号不能为空'
                    },
                    remote:{
                        url:'/user/accountCheck',
                        message: '用户已存在',
                        delay :  5000,
                        type: 'POST',
                        dataType: 'json'
                    }
                }
            },
            userPassword:{
                validators:{
                    notEmpty:{
                        message: '密码不能为空'
                    }
                }
            },
            confirmPassword:{
                validators:{
                    notEmpty:{
                        message: '密码不能为空'
                    },
                    identical:{
                        field:'userPassword',
                        message:'前后密码不一致'
                    }
                }
            },
            userName:{
                validators:{
                    notEmpty:{
                        message: '用户名不能为空'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                        message: '用户名只能由字母、数字、点、下划线和汉字组成'
                    }
                }
            },
            userBirthday:{
                validators:{
                    regexp: {
                        regexp: /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/,
                        message: '请以XXXX-XX-XX格式输入正确生日'
                    }
                }
            },
            job:{
                validators:{
                    regexp: {
                        regexp: /^[\u4e00-\u9fa5]{0,}$/,
                        message: '请以中文输入您的职业'
                    }
                }
            },
            email:{
                validators:{
                    emailAddress:{
                        message:'请输入合法的邮箱格式'
                    }
                }
            },
            wechat:{

            },
            telephone:{
                validators:{
                    regexp: {
                        regexp: /^[1][0-9]{10}$/,
                        message: '请输入正确的手机格式'
                    }
                }
            }
        }
    }).on('success.form.bv', function(e){
        //e.preventDefault();
    });
    //编辑权限验证
    $('#update-form').bootstrapValidator({
        message: 'This value is not valid',
        fields:{
            userPassword:{
                validators:{
                    notEmpty:{
                        message: '密码不能为空'
                    }
                }
            },
            confirmPassword:{
                validators:{
                    notEmpty:{
                        message: '密码不能为空'
                    },
                    identical:{
                        field:'userPassword',
                        message:'前后密码不一致'
                    }
                }
            },
            userName:{
                validators:{
                    notEmpty:{
                        message: '用户名不能为空'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                        message: '用户名只能由字母、数字、点、下划线和汉字组成'
                    }
                }
            },
            userBirthday:{
                validators:{
                    regexp: {
                        regexp: /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/,
                        message: '请以XXXX-XX-XX格式输入正确生日'
                    }
                }
            },
            job:{
                validators:{
                    regexp: {
                        regexp: /^[\u4e00-\u9fa5]{0,}$/,
                        message: '请以中文输入您的职业'
                    }
                }
            },
            email:{
                validators:{
                    emailAddress:{
                        message:'请输入合法的邮箱格式'
                    }
                }
            },
            wechat:{

            },
            telephone:{
                validators:{
                    regexp: {
                        regexp: /^[1][0-9]{10}$/,
                        message: '请输入正确的手机格式'
                    }
                }
            }
        }
    }).on('success.form.bv', function(e){
        //e.preventDefault();
    });
    $("button[name^='search']").click(function(){
        var id=$(this).attr('name').split("-")[1];
        if(id=="1")
        {
            $("a[name='permission-message']").click();
        }
        // else if(id=="2")
        // {
        //     $("a[name='role']").click();
        // }
    })
    $("button[name^='reset']").click(function(){
        var id=$(this).attr('name').split("-")[1];
        if(id=="1")
        {
            $("#text-1").val("");
            $("a[name='permission-message']").click();
        }
        // else if(id=="2")
        // {
        //     $("#text-2").val("");
        //     $("a[name='role']").click();
        // }
    })
    $("#update-submit").click(function(){
        var id=$("div[name='update-modal']").attr("id").split("-")[2];
        $.ajax({
            type: "POST",
            url:'/permission/updatePermission?id='+id,
            data:$("#update-form").serialize(),
            daaType:"json",
            success:function(){
                $("#update-success").modal("show");
            }
        })
    })
    $("#delete-confirm-btn").click(function(){
        var $modal=$("div[name='delete-modal']");
        var id=$modal.attr("id").split("-")[2];
        $.ajax({
            type: "POST",
            url:'/permission/deletePermission?id='+id,
            success:function(){
                $("#delete-success").modal("show");
                //刷新界面
                //$($('#first-paginator').children().get(page-1)).children().click();
            }
        })
    })
    $("#create-btn").click(function(){
        $('#create-form').bootstrapValidator('validate');
        var bootstrapValidator = $("#create-form").data('bootstrapValidator');
        if(bootstrapValidator.isValid())
        {
            bootstrapValidator.resetForm();
            $.ajax({
                type:"post",
                url:"/permission/createPermission",
                data:$("#create-form").serialize(),
                success:function(){
                    $('div[name="create-permission"]').modal('toggle');
                    $("#create-success").modal("show");
                }
            })
        }
        else
        {

        }

    })
    $("#create-success-btn").click(function(){
        $("a[name='permission-message']").click();
    })
    $("#update-success-btn").click(function(){
        $("a[name='permission-message']").click();
    })
    $("#delete-success-btn").click(function(){
        $("a[name='permission-message']").click();
    })
    function getLocalTime(nS) {
        return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }
    function getBitrthdayLocalTime(nS) {
        var date= new Date(parseInt(nS)).toLocaleString().split(' ')[0];
        var arr = date.split("/");
        if(arr.length==3)
        {
            if(arr[1].length==1) arr[1]="0"+arr[1];
            if(arr[2].length==1) arr[2]='0'+arr[2];
            return arr[0]+"-"+arr[1]+"-"+arr[2];
        }
        return null;

    }
    function getPermissionTotalPages(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:'/permission/getPermissionTotalPages?text='+$("#text-1").val(),
            success:function(data){
                if(data.totalPages!=0)
                {
                    var options = {
                        currentPage: 1,
                        totalPages: data.totalPages,
                        numberOfPages:8,
                        bootstrapMajorVersion:3,
                        useBootstrapTooltip:true,
                        itemTexts:function(type,page, current){//文字翻译
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page){
                            $.ajax({
                                type: "POST",
                                dataType:"json",
                                url:'/permission/getPermissionByPage?Page='+page+'&text='+$("#text-1").val(),//点击分页提交当前页码
                                success:function(data){
                                    var list = data.permissionList;
                                    //DOM操作
                                    $("#first-table").empty();
                                    var head='<colgroup><col style="width:10%"><col style="width:12%"><col style="width:20%"></colgroup><thead><tr><th>权限名称</th><th>权限URL地址</th><th>操作</th></tr></thead><tbody>';
                                    $("#first-table").append(head);
                                    if (list.length != 0){
                                        for(var i=0;i<list.length;i++){
                                            var html =
                                                '<tr>'+//
                                                '<td>'+//
                                                '<span name="resourceName-'+list[i].permissionId+'">'+list[i].resourceName+'</span>'+//
                                                '</td>'+
                                                '<td>'+//
                                                '<span name="resourceUrl-'+list[i].permissionId+'">'+list[i].resourceUrl+'</span>'+//
                                                '</td>'+//
                                                '<td>'+//
                                                '<button type="button" class='+//
                                                '"btn btn-success btn-sm " name="update-'+list[i].permissionId+'" data-toggle="modal" data-target="#update-modal-'+list[i].permissionId+'">编辑'+//
                                                '</button>';
                                                html+='<button type="button" class='+//
                                                    '"btn btn-danger btn-sm" name="delete-'+list[i].permissionId+'" data-toggle="modal" data-target="#delete-modal-'+list[i].permissionId+'">删除'+//
                                                    '</button>';////按钮！！！！！
                                            html+='</td>'+'</tr>';
                                            $("#first-table").append(html);

                                        }
                                    }
                                    else{
                                        $("#first-table").append('暂无数据！！！');
                                    }
                                    var tail='</tbody>';
                                    $("#first-table").append(tail);
                                    //添加JS功能-编辑
                                    $("button[name^='update-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        var $modal=$("div[name='update-modal']");
                                        $modal.attr("id","update-modal-"+id);
                                        $.ajax({
                                            type:"POST",
                                            url:"/permission/loadPermission?id="+id,
                                            success:function(data){
                                                var permission=data.permission;
                                                $modal.find("input[name='resourceName']").val(permission.resourceName);
                                                $modal.find("input[name='resourceUrl']").val(permission.resourceUrl);
                                            }
                                        })
                                    })
                                    //添加js删除逻辑
                                    $("button[name^='delete-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        var $modal=$("div[name='delete-modal']");
                                        $modal.attr("id","delete-modal-"+id);
                                    })
                                }
                                //success end;
                            })
                        }
                    }
                    $('#first-paginator').bootstrapPaginator(options);
                    $($('#first-paginator').children().get(0)).children().click();
                }
                else
                {
                    $("#first-table").empty();
                    var head='<colgroup><col style="width:10%"><col style="width:12%"><col style="width:20%"></colgroup><thead><tr><th>权限名称</th><th>权限URL地址</th><th>操作</th></tr></thead><tbody>';
                    $("#first-table").append(head);
                    $("#first-paginator").empty();
                }
            }
        })
    }
    $(function(){
        $("a[name='permission-message']").click(getPermissionTotalPages);
        $("a[name='permission-message']").click();
    });

</script>
</body>
</html>